<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Link & Go</title>
    <link href="./css/common.css" rel="stylesheet">
    <link href="./css/game.css" rel="stylesheet">
    <link href="./css/record.css" rel="stylesheet">
</head>
<body>
<div class="" id="game_page">
    <canvas id="canvas" width="1440px" height="720px"></canvas>
    <div class="tool_bar">
        <div class="item" id="road_paver"><img src="./images/road_paver.png"></div>
        <div class="item" id="rebirth_gate"><img src="./images/rebirth_gate.png" ></div>
        <div class="item" id="navigator"><img src="./images/navigator.png"></div>
        <div class="item" id="remove_tool"><img src="./images/remove_tool.png"></div>
        <div class="info"><span>Wallet:<span id="wallet_view">0</span></span></div>
        <div class="info"><span>Score:<span id="score_view">0</span></span></div>
        <div class="info"><span>Time:<span id="time_view">100</span></span></div>
        <a href="./index.html" class="btn btn-xs">Main Page</a>

        <div id="setting_box">
            <span class="btn btn-xs" data-show="false" id="setting_btn">Setting</span>
            <input type="radio" id="setting_radio">
            <div id="setting_menu">
                <div class="item" id="save_game_btn">Save Game</div>
                <div class="item" id="load_game_btn">Load Game</div>
            </div>
        </div>
        <div id="launch_btn">Launch</div>
        <div id="build_btn">Build</div>
    </div>
</div>
<div id="game_over_page">
    <div id="game_status_loss_view">You Loss</div>
    <div id="game_status_win_view">You Win</div>
    <table class="game_info">
        <tr><td>Score:</td><td><span id="game_info_score_view"></span></td></tr>
        <tr><td>Wallet:</td><td><span id="game_info_wallet_view"></span></td></tr>
    </table>
    <div class="btn-area">
        <button class="btn" id="end_game_btn">End Game</button>
        <button class="btn" id="play_again_btn">Play Again</button>
        <button class="btn" id="next_level_btn">Next Level</button>
    </div>
</div>
<div class="modal-box" id="record_modal">
    <div class="modal">
        <div class="title">Record</div>
        <div class="body">
            <div class="item" id="record_list_item_template">
                <div class="">
                    <span class="nickname">Nickname</span>
                </div>
                <div>
                    <span>Level:<span class="level"></span></span>
                    <span>Wallet:<span class="wallet"></span></span>
                </div>
                <div class="submit_at">submit_at</div>
            </div>
            <div class="list" id="records_list">
                <div class="not-have-data">Not has record yet</div>
            </div>
        </div>
    </div>
</div>
<div id="message_box">
    <div id="message_content"></div>
</div>

<script src="./js/element.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/game.js"></script>
<script src="./js/record.js"></script>
</body>
</html>